<script>
import { reactive, toRefs } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      tableLabel: [
        "店铺标识ID",
        "店铺名称",
        "租贸状态",
        "店铺位置-X",
        "店铺位置-Y",
        "租贸时间",
        "租贸开始时间",
        "租贸结束时间",
        "所属楼层",
        "占地面积",
        "店铺备注",
        "商家名称",
        "商家种类",
        "营业执照",
        "负责人",
        "联系电话",
      ],
      tableData: [
        {
          店铺标识ID: "12242",
          店铺名称: "小米",
          租贸状态: "出租",
          "店铺位置-X": "24",
          "店铺位置-Y": "42",
          租贸时间: "45",
          租贸开始时间: "2022-02-21",
          租贸结束时间: "2023-02-21",
          所属楼层: "2",
          占地面积: "45",
          店铺备注: "无",
          商家名称: "小米",
          商家种类: "电子",
          营业执照: "342354345",
          负责人: "王二",
          联系电话: "12242345678",
        },
        {
          店铺标识ID: "12242",
          店铺名称: "小米",
          租贸状态: "出租",
          "店铺位置-X": "24",
          "店铺位置-Y": "42",
          租贸时间: "45",
          租贸开始时间: "2022-02-21",
          租贸结束时间: "2023-02-21",
          所属楼层: "2",
          占地面积: "45",
          店铺备注: "无",
          商家名称: "小米",
          商家种类: "电子",
          营业执照: "342354345",
          负责人: "王二",
          联系电话: "12242345678",
        },
        {
          店铺标识ID: "12242",
          店铺名称: "小米",
          租贸状态: "出租",
          "店铺位置-X": "24",
          "店铺位置-Y": "42",
          租贸时间: "45",
          租贸开始时间: "2022-02-21",
          租贸结束时间: "2023-02-21",
          所属楼层: "2",
          占地面积: "45",
          店铺备注: "无",
          商家名称: "小米",
          商家种类: "电子",
          营业执照: "342354345",
          负责人: "王二",
          联系电话: "12242345678",
        },
      ],
    });

    return { ...toRefs(state) };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never"> 模型 </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <Table :tableLabel="tableLabel" :tableData="tableData" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>